<!-- 实物奖品列表 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData= {};gzThreeRef.clear() }" searchConditionNum="6">
        <a-form-item class="table-search-item" label="活动编号">
          <a-input v-model:value="searchData['activityNo']" :placeholder="'活动编号'" />
        </a-form-item>
        <a-form-item class="table-search-item" label="实物名称">
          <a-input v-model:value="searchData['goodsName']" :placeholder="'实物名称'" />
        </a-form-item>
        <a-form-item class="table-search-item" label="机构号">
          <GzTreeSelect ref="gzThreeRef" v-model:value="searchData['agentNo']" :isNeedDefault="false" />
        </a-form-item>
        <a-form-item class="table-search-item" label="奖品状态">
          <a-select v-model:value="searchData['state']" :placeholder="'状态'">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="0">草稿</a-select-option>
            <a-select-option :value="1">下线</a-select-option>
            <a-select-option :value="2">上线</a-select-option>
            <a-select-option :value="3">已过期</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item" label="批次号">
          <a-input v-model:value="searchData['batchNo']" :placeholder="'批次号'" />
        </a-form-item>
      </GzSearchForm>
      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        row-key="goodsId"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_GOODS_INFO_ADD')" type="primary" @click="addOrEditFunc(false)">
            <plus-outlined />新建
          </a-button>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="$access('ENT_GOODS_INFO_VIEW') && column.key === 'goodsName'">
            <b><a @click="addOrEditFunc(record,true,true,true)">{{ record.goodsName }}</a></b>
          </template>
          <template v-if="column.key === 'goodsNum'">
            {{ record.goodsNum==0&&record.goodsGet==0 ? '--': (record.goodsNum || 0) + '/' + (record.goodsGet || 0) }}
          </template>
          <template v-if="column.key === 'goodsPrice'">
            {{ record.goodsPrice / 100 || '--' }}
          </template>
          <template v-if="column.key === 'goodsAmount'">
            {{ record.goodsAmount / 100 || '--' }}
          </template>
          <template v-if="column.key === 'state'">
            <a-badge v-if="record.state == 0" status="default" text="草稿" />
            <a-badge v-else-if="record.state == 1" status="warning" text="下线" />
            <a-badge v-else-if="record.state == 2" status="processing" text="上线" />
            <a-badge v-else-if="record.state == 3" status="error" text="过期" />
          </template>
          <template v-if="column.key === 'activityName'">
            <template v-if="record.activityName">{{ record.activityName }}</template>
            <template v-else>--</template>
          </template>
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <a-button v-if="$access('ENT_GOODS_INFO_EDIT') && record.state ==0" type="link" @click="addOrEditFunc(record)">修改</a-button>
              <a-button v-if="$access('ENT_GOODS_INFO_EDIT') && record.state == 1" type="link" @click="stateChange(record)">上线</a-button>
              <a-button v-if="$access('ENT_GOODS_INFO_EDIT') && record.state == 2" type="link" @click="stateChange(record)">下线</a-button>
              <a-button v-if="$access('ENT_GOODS_INFO_EDIT') && record.state == 2" type="link" @click="addOrEditFunc(record,true,false,false,record.goodsNum)">追加</a-button>
              <a-button v-if="$access('ENT_GOODS_INFO_DEL') && record.state !== 2 && !record.activityId" type="link" danger @click="goodsDelete(record)">删除</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
    <!-- 新增实物奖品 -->
    <AddOrEdit ref="addOrEditRef" :callbackFunc="() => infoTableRef.refTable()" />
    <!-- 详情 -->
    <Detail ref="detailRef" />
  </page-header-wrapper>
</template>
<script setup lang="ts">
import AddOrEdit from './AddOrEdit.vue'
import Detail from './Detail.vue'
import {$getGoodsList,$goodsState,$goodsDelete} from '@/api/awardMange/goods/index'
import { ref, reactive, getCurrentInstance } from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const gzThreeRef = ref()
const infoTableRef = ref()
const addOrEditRef = ref()
const detailRef = ref()
const searchData = ref({})
let tableColumns = reactive([
  { key: 'batchNo', title: '批次号', dataIndex: 'batchNo',fixed: 'left', width: 140, minWidth: 140, maxWidth: 250 },
  { key: 'goodsName', title: '商品名称',dataIndex: 'goodsName', width: 220, minWidth: 220, maxWidth: 250 },
  { key: 'goodsNum', title: '总数量/已领取数量', dataIndex: 'goodsNum', width: 170, minWidth: 170, maxWidth: 220 },
  { key: 'goodsPrice', title: '单价（元）', dataIndex: 'goodsPrice', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'goodsAmount', title: '预算金额（元）', dataIndex: 'goodsAmount', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'state', title: '状态', dataIndex: 'state', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'activityName', title: '已配置活动', dataIndex: 'activityName', width: 140, minWidth: 140, maxWidth: 170,  },
  { key: 'agentNo', title: '归属机构号', dataIndex: 'agentNo', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'agentName', title: '机构名称', dataIndex: 'agentName', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'operation', title: '操作', dataIndex: 'operation',width: 260, fixed: 'right', align: 'center' }
])


// 请求table接口数据
function reqTableDataFunc(params: any) {
  return $getGoodsList(params)
}
// 表格查询
function searchFunc() {
  infoTableRef.value.refTable(true)
}
/**
 * 新增OR修改
 * @param record 当前实物奖品
 * @param disabled 是否限制修改 默认不限制 false
 * @param minGoodsNum 奖品最少配置数量 默认1
 */
function addOrEditFunc(record,disabled = false,isDisabled,isDetail,minGoodsNum = 1){
  addOrEditRef.value.show(record.goodsId,disabled,isDisabled,isDetail,minGoodsNum)
}
// 修改奖品状态
function stateChange(record){
  if(record.state == 1){
    $infoBox.confirmDanger('确认开启？', '请确认是否开启当前奖品状态？', () => {
      $goodsState({ goodsId: record.goodsId, state: 2 }).then(res => {
        $infoBox.message.success('开启成功')
        infoTableRef.value.refTable()
      })
    })
  }else{
    $infoBox.confirmDanger('确认关闭？', '请确认是否关闭当前奖品状态？', () => {
      $goodsState({ goodsId: record.goodsId, state: 1 }).then(res => {
        $infoBox.message.success('关闭成功')
        infoTableRef.value.refTable()
      })
    })
  }
}
// 删除奖品
function goodsDelete(record){
  $infoBox.confirmDanger('确认删除？', '请确认是否删除当前奖品？', () => {
    if(record.state == 2){
      $infoBox.message.warn('该奖品已配置完成，无法删除！')
      return
    }
    $goodsDelete(record.goodsId).then(res => {
      $infoBox.message.success('删除成功！')
      infoTableRef.value.refTable()
    })
  })
}
// 详情
function detailFunc(goodsId){
  detailRef.value.show(goodsId)
}
</script>
